<template>
  <view class="tabs">
    <view
      :class="{ 'tabs-active': option.value == value }"
      v-for="option in options"
      :key="option.value"
      @click="handleClick(option.value)"
      >{{ option.label }}</view
    >
  </view>
</template>

<script>
export default {
  name: 'Tabs',
  model: {
    prop: 'value',
    event: 'update:value',
  },
  props: {
    value: [String, Number],
    options: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    handleClick(val) {
		if(val != this.value) {
		  this.$emit('update:value', val)
		  this.$emit('change')
			
		}
    },
  },
}
</script>

<style lang="scss" scoped>
.tabs {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 200rpx;
  box-sizing: border-box;
  font-size: 30rpx;
  font-family: PingFang SC-Bold, PingFang SC;
  color: #999999;
  position: relative;
}

.tabs-active {
  font-weight: bold;
  color: #454a5e;
  transition: all .3s;
  position:relative;
}

.tabs-active::before
{
    content: '';
    width: 30rpx;
    height: 6rpx;
    background: #454A5E;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    opacity: 1;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -10rpx;
}
</style>
